<template>
	<view class="mainpadding2">
		<u-navbar title="選擇使用" placeholder autoBack>
			<view class="flexright xiaohui" slot="right" @click="chakan">查看使用</view>
		</u-navbar>
		<view class="flexcenter" v-if="!list.data.length">
			<view class="placeholderimage" style="margin-top: 100rpx;"></view>
		</view>
		<view class="flexbetween flex_wrap">
			<view class="ffffff margin_top radius flexcolumn" :class="item.ischeck?'itembox2':'itembox'"
				v-for="item in list.data" :key="item.id" @click="selectDesk(item)">
				<view class=" titletext bold" :class="item.ischeck?'huang_text':'lv_text'" style="margin-top: 60rpx;">空餘
				</view>
				<view class="hei_text bold main_size" style="margin-top: 40rpx;">可入座：{{item.count}}人</view>
				<view :class="item.ischeck?'xiaobiao2':'xiaobiao'">{{item.endtime}}</view>
				<view :class="item.ischeck?'bottomzh2':'bottomzh'">{{item.num}}</view>
			</view>
		</view>
		<view class="posibottom mainpadding" v-if="needCheck">
			<view class="submitbtn" @click="checkMoresubmit">確定<text class="hong_text"
					v-show="Number(count)-Number(deskCount)>0">(還差{{Number(count)-Number(deskCount)>0?Number(count)-Number(deskCount):0}})人無座</text>
			</view>
		</view>
		<!-- 確認選擇弹窗 -->
		<u-modal :show="show" showCancelButton confirmColor="#ffb800" @cancel="show=false" @confirm="confirm"
			confirmText="確認" cancelText="取消">
			<view class="color_ling text_weight text">
				您確定要選擇此使用嗎？
			</view>
		</u-modal>
		<u-popup :show="lxshow" mode="center" @close="lxshow = false" round="10">
			<view style="padding: 60rpx 100rpx;">
				<view class="flexcenter titletext bold hei_text">選擇操作類型</view>
				<view class="resetbtn2 flexcenter ffffff mainpadding margin_top2 huang_text main_size bold"
					@click="lxshow=false;show = true">商品訂單</view>
				<view class="resetbtn3 flexcenter ffffff mainpadding margin_top2 huang_text main_size bold"
					@click="chidaobao()">計時</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				shop_id: uni.getStorageSync("shop_id"),
				list: {
					data: []
				},
				ordermark_id: "", //订單id
				id: "", //使用id
				deskCount: 0,
				count: 0, //总人数
				needCheck: false,
				lxshow: false,
				shopInfo:{}
			}
		},
		onLoad(options) {
			this.ordermark_id = options.id
			this.count = options.count
		},
		onShow() {
			this.deskCount = 0
			this.getList()
			this.getshopDetail()
		},
		methods: {
			getshopDetail() {
				this.http.request("/api/shop/Shopdeail", 'POST', {
					shop_id:uni.getStorageSync("shop_id")
				}).then(res=>{
					this.shopInfo = res.data
				})
			},
			chidaobao() {
				// if (Number(this.count) > Number(this.deskCount)) {
				// 	this.http.toast("座位不足，須拼桌")
				// 	this.deskCount = 0
				// 	this.needCheck = true
				// 	return false
				// }
				uni.navigateTo({
					url: "/pages/workbench/tianjiacdbkh?id=" + this.id+"&ordermark_id="+this.ordermark_id
				})
			},
			chakan() {
				uni.navigateTo({
					url: "/pages/workbench/zhuotaigl"
				})
			},
			async getList() { //使用列表
				this.list.data = []
				let res = await this.http.request('/api/shop/listtable', 'POST', {
					shop_id: this.shop_id, //店鋪id
				})
				if (res.code == 1) {
					res.data.forEach(item => {
						if (item.status == 0) {
							this.$set(item, "ischeck", false)
							this.list.data.push(item)
						}
					})
					// console.log(this.list.data);
				} else if (res.code == 0) {
					this.list.data = []
					// this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			selectDesk(item) { //選擇使用
				if (this.needCheck) {
					if (!item.ischeck && Number(this.count) - Number(this.deskCount) < 0) {
						this.http.toast('已無滿足全員入座');
						return false
					}
					if (item.ischeck) {
						this.deskCount = Number(this.deskCount) - Number(item.count)
					} else {
						this.deskCount = Number(this.deskCount) + Number(item.count)
					}
					item.ischeck = !item.ischeck
					return false
				}
				this.id = item.id
				this.deskCount = item.count
				console.log(this.deskCount);
				if(this.shopInfo.hy_type==1){
					this.lxshow = true
				}else{
					this.show = true
				}
			},
			checkMoresubmit() {
				if (Number(this.count) - Number(this.deskCount) > 0) {
					this.http.toast('還差' + (Number(this.count) - Number(this.deskCount) > 0 ? Number(this.count) - Number(
						this.deskCount) : 0) + "人無座")
					return false
				}
				let table_ids = []
				let table_id = ""
				this.list.data.forEach((item, index) => {
					if (item.ischeck && index == 0) {
						table_id = item.id
					}
					if (item.ischeck && index != 0) {
						table_ids.push(item.id)
					}
				})
				this.http.request('/api/Ordermake/addOrdermake', 'POST', {
					ordermark_id: this.ordermark_id, //订單id
					table_id,
					table_ids: table_ids.join(),
					order_type:2,
				}).then(res => {
					if (res.code == 1) {
						this.http.toast("入座成功")
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					} else {
						this.http.toast(res.msg)
					}
				})
			},
			async confirm() {
				this.show = false
				if (Number(this.count) > Number(this.deskCount)) {
					this.http.toast("座位不足，須拼桌")
					this.deskCount = 0
					this.needCheck = true
					return false
				}
				let res = await this.http.request('/api/Ordermake/addOrdermake', 'POST', {
					ordermark_id: this.ordermark_id, //订單id
					table_id: this.id,
					order_type:2,
				})
				if (res.code == 1) {
					this.http.toast("入座成功")
					setTimeout(() => {
						uni.navigateBack(1)
					}, 500)
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
				this.show = false
			}
		}
	}
</script>
<style lang="scss" scoped>
	.dingwei {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}

	.itembox {
		width: 48%;
		border: 2rpx solid #00B855;
		background-color: #e1f3e9;
		padding-bottom: 100rpx;
		position: relative;
	}

	.itembox2 {
		width: 48%;
		border: 2rpx solid #feb700;
		background-color: #faf4df;
		padding-bottom: 100rpx;
		position: relative;
	}

	.xiaobiao {
		background-color: #cbedda;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #00B855;
		padding: 5rpx 40rpx;
		border-radius: 50rpx;
	}

	.xiaobiao2 {
		background-color: rgba(254, 184, 0, .3);
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #feb800;
		padding: 5rpx 40rpx;
		border-radius: 50rpx;
	}

	.bottomzh {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 0;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #00B855;
	}

	.bottomzh2 {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 0;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #feb800;
	}
</style>